<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

/*    let data = {}
    Object.defineProperty(data,'name',{
        // 访问name属性就会执行此方法 返回值就是获取到的值
        get(){
            console.log('name属性被获取了')
            return '林云龙'
        },
        // 设置新值就会执行此方法 newVal就是设置的新值
        set(newVal){
            console.log('name属性被设置新值了')
            console.log(newVal)
        }
    })*/

/*    let data = {}
    let _name = '李云龙'
    Object.defineProperty(data, 'name', {
        get() {
            console.log('你访问了data1的name属性')
            return _name
        },

        set(newValue) {
            console.log('你修改了data1的name属性最新的值为', newValue)
            _name = newValue
        }
    })*/

let data = {
    name: '李云龙',
    gender: '男',
    age: '19',
}

//  1.如何把这个提前申明好的对象,把里面的所有的属性都变成我们刚才讲过的 set和get的形式？
//  可以做到不管是访问data中的任何一个属性还是设置data中的任何一个属性我们都能知道
// 1. 由于有多个属性 对象的遍历
Object.keys(data).forEach((key) => {
    console.log(key, data[key])
    // key代表data对象的每一个属性名
    // data[key]代表data对象每一个属性对应的value值
    // data 源对象
    // 处理每一个对象key转变成响应式
    defineReactive(data, key, data[key])
})
//1. 函数定义形参相当于在内部 申明了和形参名字对应的变量 并且初始值为undefined
//2. 函数调用传入实参的时候 相当于给内部申明好的变量做了赋值操作 （首次遍历举例）
//  3. defineReactive函数调用完毕 本来应该内部所有的变量都会被回收 但是如果内部有其它函数使用了当前变量则形成了闭包 不会被回收
//4. 内部由于有其它方法引用了value属性  所以defineReactive函数的执行并不会导致value变量的销毁 会一直常驻内存
//5. 由于闭包的特性 每一个传入下来的value都会常驻内存  相当于我们上一节讲的中间变量_name 目的是为了set和get的联动
function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
        get() {
            console.log('您访问了属性', key)
            return value
        },
        set(newValue) {
            console.log('您修改了属性', key)
            value = newValue
        }
    })
}
</script>
</html>
